<template>
  <div class="container">
    <div class="video-player">
      <div class="control">
        <button class="camera-btn" @click="toggleCameraSelection">
          选择摄像头
        </button>
        <div class="button-extra">
          <el-select v-if="showCameraSelection"  class="select-btn" v-model="selectedCamera" placeholder="请选择机位">
            <el-option value="1">机位 1</el-option>
            <el-option value="2">机位 2</el-option>
            <el-option value="3">机位 3</el-option>
            <el-option value="4">机位 4</el-option>
          </el-select>
          <el-button v-if="showCameraSelection"  @click="submitCameraSelection" style="margin-left: 10px">提交</el-button>
        </div>
      </div>
      <!-- Video playback box -->

      <div v-if="isVideoAvailable" class="video-wrapper">
        <img class="video-stream" :src="videoSrc1" style="float: left;" />
      </div>
      <div v-else class="video-placeholder">
          <div class="wrapper">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="shadow"></div>
            <div class="shadow"></div>
            <div class="shadow"></div>
            <span>Loading</span>
          </div>
      </div>
    </div>

    <div class="info-form">
      <!-- Information entry form -->
      <h2>信息录入</h2>
      <form ref="ruleFormRef"
            :model="user">

        <div class="form-group">
          <label for="name">姓名</label>
          <input type="text" id="name" v-model="user.name">
        </div>

        <div class="form-group">
          <label for="address">住址</label>
          <input type="text" id="address" v-model="user.addr">
        </div>

        <div class="form-group">
          <label for="phone">电话</label>
          <input type="tel" id="phone" v-model="user.phone">
        </div>

        <div class="form-group">
          <label for="email">邮件</label>
          <input type="email" id="email" v-model="user.email">
        </div>

        <div class="form-group">
          <label for="gender">性别</label>
          <select id="gender" v-model="user.gender">
            <option value="male">男</option>
            <option value="female">女</option>
          </select>
        </div>

        <div class="form-group">
          <label for="age">年龄</label>
          <input type="number" id="age" v-model="user.age">
        </div>

        <!-- Submit button -->
        <div class="controls" style="margin-top: 10px">
          <button type="Save" @click="onSave()">保存图片</button>
          <button type="submit" @click="onSubmit(ruleFormRef)" style="margin-left: 20px">提交信息</button>
        </div>

      </form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref,onMounted  } from 'vue'
import router from '@/router/index'
import type { FormInstance } from 'element-plus'
import { encode,decode  } from 'js-base64';
import { userInfor } from "@/api/types/userInfor";
import { addWhiteList } from "@/api/InforManage";
import { recognizeClick, trackClick } from "@/api/video";
import {
  invade_close_click,
  monitor_close_click,
  recognize_close_click,
  register_close_click,
  track_close_click
} from "@/api/close";
import {ElButton} from "element-plus";
import { globalVariable } from '../../store/modules/globalurl'
/**
 * 钩子函数实时调用
 */

const isVideoLoaded = ref(false);

onMounted(() => {
  close(); // 调用你的函数
  checkVideoAvailability();
});

const isVideoAvailable = ref(false);

const checkVideoAvailability = async () => {
  try {
    const response = await fetch(videoSrc1.value);
    if (response.status === 200) {
      isVideoAvailable.value = true;
    } else {
      console.error('获取视频1信息失败，状态码：', response.status);
    }
  } catch (error) {
    console.error('发生错误：', error);
  }
};

function close(){

  register_close_click().then((response) => {

    var res = response.data
    if (res.respCode === '000000') {
      //ElMessage.success('关闭成功');

    } else {
      ElMessage.error(res.respMsg);
    }
  })
      .catch((error) => {
        console.error(error);
        // ElMessage.error('关闭失败，请重试');
      });
  invade_close_click().then((response) => {

    var res = response.data
    if (res.respCode === '000000') {
      //ElMessage.success('关闭成功');

    } else {
      ElMessage.error(res.respMsg);
    }
  })
      .catch((error) => {
        console.error(error);
        // ElMessage.error('关闭失败，请重试');
      });
  track_close_click().then((response) => {

    var res = response.data
    if (res.respCode === '000000') {
      //ElMessage.success('关闭成功');

    } else {
      ElMessage.error(res.respMsg);
    }
  })
      .catch((error) => {
        console.error(error);
        // ElMessage.error('关闭失败，请重试');
      });
  recognize_close_click().then((response) => {

    var res = response.data
    if (res.respCode === '000000') {
      //ElMessage.success('关闭成功');

    } else {
      ElMessage.error(res.respMsg);
    }
  })
      .catch((error) => {
        console.error(error);
        // ElMessage.error('关闭失败，请重试');
      });
  monitor_close_click().then((response) => {

    var res = response.data
    if (res.respCode === '000000') {
      //ElMessage.success('关闭成功');

    } else {
      ElMessage.error(res.respMsg);
    }
  })
      .catch((error) => {
        console.error(error);
        // ElMessage.error('关闭失败，请重试');
      });


}


const ruleFormRef = ref<FormInstance>()
// 这里存放数据
const user = reactive<userInfor>({
  name: '',
  addr: '',
  phone:'',
  email:'',
  age:'',
  gender:'',
})
/**
 * 初始化视频路径
 */
const videoSrc1 = ref(globalVariable+'/api/video_register/1');

/**
 * 摄像头选择部分
 */
const showCameraSelection = ref(false);
const selectedCamera = ref('');

function toggleCameraSelection() {
  showCameraSelection.value = !showCameraSelection.value;
  selectedCamera.value = '';
}
/**
 * 提交摄像头的选择
 */
function submitCameraSelection() {

  let selectedCameraValue = selectedCamera.value; // 从 <select> 元素中获取选中的值

  if (selectedCameraValue === '1') {

    videoSrc1.value = globalVariable+'/api/video_register/1';
    // videoRegister1();
    showCameraSelection.value = false;
    selectedCamera.value = '';
  }else if(selectedCameraValue === '2'){
    // videoRegister2();
    videoSrc1.value = globalVariable+'/api/video_register/2';
    showCameraSelection.value = false;
    selectedCamera.value = '';
  }else if(selectedCameraValue === '3'){
    // videoRegister3();
    videoSrc1.value = globalVariable+'/api/video_register/3';
    showCameraSelection.value = false;
    selectedCamera.value = '';
  }else if(selectedCameraValue === '4'){
    // videoRegister4();
    videoSrc1.value = globalVariable+'/api/video_register/4';
    showCameraSelection.value = false;
    selectedCamera.value = '';
  }
}
/**
 *  保存人脸截图
 */
const onSave=()=>{
  // 具体函数在video.ts内
  recognizeClick().
  then((response) => {

    console.log('保存人脸信息成功！')
    var res = response.data
    if (res.respCode === '000000') {
      ElMessage.success('保存成功');
      // router.push('/');
    }
    else {
      ElMessage.error(res.respMsg);
    }//else

  })//then
      .catch((error) => {
        console.error(error);
        ElMessage.error('保存失败，请重试');
      });//catch
}
const onSubmit = (formEl: FormInstance | undefined) => {
  const requestData = {
    name: user.name,
    addr: user.addr,
    phone: user.phone,
    email: user.email,
    age: user.age,
    gender: user.gender,
  }
  /**
   * 修改信息的函数，具体文件在Login.ts内
   */
  addWhiteList(requestData)
      .then((response) => {

        console.log(requestData)
        var res = response.data
        if (res.respCode === '000000') {
          ElMessage.success('修改成功');
          // router.push('/');
        }
        else {
          ElMessage.error(res.respMsg);
        }//else

      })//then
      .catch((error) => {
        console.error(error);
        ElMessage.error('修改失败，请重试');
      });//catch


};

</script>

<style scoped>
.container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.video-player {
  flex: 1;
  margin-right: 20px;
  width: 100%;
}

.info-form {
  flex: 1;
  border: 1px solid #ccc;
  padding: 20px;
  margin-top: 20px;
}

.form-group {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
}

label {
  margin-bottom: 5px;
}

input,
select {
  flex: 1;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

button {
  margin-top: 10px;
  padding: 8px 16px;
  background-color: #3c5287;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.wrapper{
  width:180px;
  height:60px;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
}

.circle{
  width: 20px;
  height: 20px;
  position: absolute;
  border-radius: 50%;
  background-color: #fff;
  left:45%;
  transform-origin: 50%;
  animation: circle .5s alternate infinite ease;
}

@keyframes circle{
  0%{
    top:60px;
    height:5px;
    border-radius: 50px 50px 25px 25px;
    transform: scaleX(1.7);
  }
  40%{
    height:20px;
    border-radius: 50%;
    transform: scaleX(1);
  }
  100%{
    top:0%;
  }
}
.circle:nth-child(2){
  left:90%;
  animation-delay: .2s;
}
.circle:nth-child(3){
  left:auto;
  right: -45%;
  animation-delay: .3s;
}
.shadow{
  width:20px;
  height:4px;
  border-radius: 50%;
  background-color: rgba(0,0,0,.5);
  position: absolute;
  top:62px;
  transform-origin: 50%;
  z-index: -1;
  left:45%;
  filter: blur(1px);
  animation: shadow .5s alternate infinite ease;
}

@keyframes shadow{
  0%{
    transform: scaleX(1.5);
  }
  40%{
    transform: scaleX(1);
    opacity: .7;
  }
  100%{
    transform: scaleX(.2);
    opacity: .4;
  }
}
.shadow:nth-child(4){
  left: 90%;
  animation-delay: .2s
}
.shadow:nth-child(5){
  left:auto;
  right:-45%;
  animation-delay: .3s;
}
.wrapper span{
  position: absolute;
  top:75px;
  font-family: 'Lato';
  font-size: 20px;
  letter-spacing: 12px;
  color: #fff;
  left:58%;
}

.video-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 600px;
  height: 600px;
  background-color: #3c5287;
  color: #333;
  font-size: 1.2em;
}

.controls {
//margin-top: 30px;
  display: flex;
  justify-content: end;
  //align-items: center;
//margin-bottom: 50px;
}

.select-btn{
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
}

.control {
  display: flex;
  margin-bottom: 10px;
}

</style>